<template>
  <div>

	  <myheader></myheader>

	<section class="featured-block text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-6 text-center">
					<div class="product-image mt-3">
						<img class="img-fluid" :src="mysrc">
					</div>
					<div class="product-thumbnails">
						<img v-for='img in l' @click="changeimg(img)" class="mt-2 mr-2 img-fluid" :src="'http://localhost:8000/static/upload/'+img" >
						<!-- <a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a> -->
					</div>
				</div>
				<div class="col-md-6 mt-5 mt-md-2 text-center text-md-left">
					<h2 class="mb-3 mt-0">{{info.name}}</h2>
					<p class="lead mt-2 mb-3 primary-color">${{info.price}}</p>

					<br>

					颜色：{{param.color}} <br>
					尺寸：{{param.size}} <br>
					季节：{{param.season}} <br>

					<h5 class="mt-4">Description</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis velit vestibulum massa sollicitudin auctor. Cras ac venenatis orci. Ut consequat, purus ut ultrices ultricies, nisi sem ornare quam, sed ultricies mi nisl sit amet purus.</p>
					<p>Suspendisse potenti. Nunc in libero luctus, sagittis leo sit amet, volutpat lacus. Quisque a porta risus. Integer aliquet nibh vitae vestibulum accumsan</p>
					<h5 class="mt-5">Care Instructions</h5>
					<p>Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>
					<select class="custom-select form-control mt-4 mb-4">
						<option selected>Size</option>
						<option value="1">Small</option>
						<option value="2">Medium</option>
						<option value="3">Large</option>
					</select>
					
					<!--Quantity: <input type="text" class="form-control quantity mb-4" name="" value="1">-->
					
					<a href="#" class="btn btn-full-width btn-lg btn-outline-primary">Add to cart</a></div>
			</div>
		</div>
	</section>
	
	<div class="divider"></div>
	
	<section class="products text-center">
		<div class="container">
			<h3 class="mb-4">Related Products</h3>
			<div class="row">
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
			</div>
		</div>
	</section>
	

	<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>

import myheader from './myheader'
import myfooter from './myfooter'


export default {
  data () {
    return {
	  msg: "这是一个变量",
	  //商品小图
	  l:[],
	  //商品id
	  id:'',
	  //商品详情
	  info:{},
	  //商品规格
	  param:{},
	  //图片地址
	  mysrc:'',
    }
  },

  components:{
	  "myheader":myheader,
	  'myfooter':myfooter
  },
  
  mounted:function(){

	this.id = this.$route.query.id;

	this.get_good();
  
},
  methods:{


	  //更换大图
	  changeimg(img){


			this.mysrc = 'http://localhost:8000/static/upload/'+img
	  },

	  get_good(){

		  this.axios.get('http://127.0.0.1:8000/goodinfo/',{params:{id:this.id}}).then(res=>{


			  this.info = res.data.data
			  this.l = res.data.l
			  
			  //给图片地址赋值
			  this.mysrc = 'http://localhost:8000/static/upload/'+this.info.img

			  //类型转换
			  this.param = JSON.parse(this.info.params)
			  
		  })

	  }
     
  }
}


</script>
 
<style>

.img-fluid{

	cursor: pointer;

}

</style>